import React from 'react'
import './order.scss'
import { orderList } from '../actions/orderListAction'
import { connect } from 'react-redux'
import ScrollView from 'component/ScrollView/ScrollView.jsx'
import ListItem from './ListItem/ListItem'
class Order extends React.Component {
  constructor(props) {
    super(props)
    this.page = 0
    this.fetchData(this.page)
  }
  fetchData(page) {
    this.props.dispatch(orderList(page))
  }
  onLoadPage() {
    if (this.props.page <= 3) {
      this.fetchData()
    }
  }
  renderItems() {
    let list = this.props.list
    return list.map((item, index) => {
      return <ListItem key={index} itemData={item} />
    })
  }
  render() {
    return (
      <div className="orderList">
        <div className="order_top">订单</div>
        <div className="order_content">
          <ScrollView
            loadCallback={this.onLoadPage.bind(this)}
            isend={this.props.isend}
          >
            {this.renderItems()}
          </ScrollView>
        </div>
      </div>
    )
  }
}
// export default Order
export default connect(state => ({
  list: state.orderReducer.list,
  page: state.orderReducer.page,
  isend: state.orderReducer.isend
}))(Order)
